
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 320px; width: 240px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee;}
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="imagesloaded.pkgd.js"></script>
<script type="text/javascript">

function sld() {
$(".slideshow img").each(function(){
		//alert($(this).width());
		var w = $(this).width();
		var h = $(this).height();
		//$(this).height("480px");
		if ((w/h) > 0.85){
			$(this).height("240px");
			$(this).css("margin-left", parseInt((320 - $(this).width())/2)+"px");
		} else {
			$(this).width("320px");
			$(this).css("margin-top", parseInt((240 - $(this).height())/2)+"px");
		}


  });
	$('.slideshow').cycle({
		speed: 1000,
		timeout: 1000,
		pager: '#nav',
 

		});
	

}




$(document).ready(function() {

//var prefs = new _IG_Prefs();
var rss="https://picasaweb.google.com/data/feed/base/user/107793413718694936117/albumid/5799989102670554769?alt=rss&kind=photo&authkey=Gv1sRgCP7wk-SdhuL2iAE&hl=fr";
var image_delay = 2000;

//var viewport = gadgets.window.getViewportDimensions();

if(rss=="")
    alert("le flux vers l'album est manquant");  
  json = rss.replace('rss','json')+"&Duration=0&format=jsonp&callback=?";

$.getJSON(json,
  function(data) {
  var img = new Image();
  
    $.each(data.feed.entry, function(i,item) {
        img.src = item.media$group.media$thumbnail[2].url.replace("s288","s1600");
        $("<img/>").attr(
            {
            src : item.media$group.media$thumbnail[2].url.replace("s288","s1600")
            
            //width : 400, //viewport.width,
            //height : 300 //viewport.height
        }).appendTo(".slideshow");
        
    })
    sld();
});
});







</script>
</head>
<body bgcolor="blue"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<div class="slideshow">
	</div>
</body>
</html>
